<template>
  <div>
    <el-row class="p-b">
      <el-col :span="12">
        <el-button v-permission="['roles_129_03']" @click="addRole">添加</el-button>
      </el-col>
      <el-col :span="12" class="t-r">
        <el-button icon="el-icon-refresh-right" circle @click="getRoles" />
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        label="角色ID"
        prop="id"
      />
      <el-table-column
        label="角色名称"
        prop="roleName"
      />
      <el-table-column
        label="角色描述"
        prop="roleDesc"
      />
      <el-table-column
        width="80"
        label="操作"
      >
        <template slot-scope="scope">
          <el-dropdown>
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-permission="['roles_139_03']" @click.native="detailRole(scope.row)">查看</el-dropdown-item>
              <el-dropdown-item v-permission="['roles_139_03']" @click.native="editRole(scope.row)">编辑</el-dropdown-item>
              <el-dropdown-item v-permission="['roles_130_03']" @click.native="deletelRole(scope.row)">册除</el-dropdown-item>
              <el-dropdown-item v-permission="['roles_134_03']" @click.native="rightRole(scope.row)">权限</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <role-detail :visible.sync="roleDetailVisible" :role="currentRole" />
    <role-form :id="roleId" :visible.sync="roleFormVisible" :cb="getRoles" :type="type" />
  </div>
</template>

<script>
import { getRoles, deleteRole } from '@/api/rights'
import importAll from '@/utils/importAll'
const components = importAll(require.context('./components', true, /\.vue$/))

export default {
  name: 'ROLES',
  components: {
    ...components
  },
  data() {
    return {
      tableData: [],
      roleDetailVisible: false,
      currentRole: {},
      roleFormVisible: false,
      type: 1,
      roleId: '',
      rightsVisible: false
    }
  },
  created() {
    this.getRoles()
  },
  methods: {
    async getRoles() {
      this.tableData = await getRoles()
    },
    detailRole(role) {
      this.currentRole = role
      this.roleDetailVisible = true
    },
    addRole() {
      this.type = 1
      this.roleId = ''
      this.roleFormVisible = true
    },
    editRole(role) {
      this.type = 2
      this.roleId = role.id
      this.roleFormVisible = true
    },
    rightRole(role) {
      // this.rightsVisible = true
      this.$router.push({ name: 'role_rights', params: { roleId: role.id }})
    },
    deletelRole(role) {
      this.$confirm(`删除 ${role.roleName}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteRole(role.id)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getRoles()
      }).catch(() => {
        console.log('取消删除')
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
